{template 'web/'.$cfg['floder'].'/base_menu'}
<script src="{MODULE_URL}template/resources/js/jquery-ui.min.js"></script>
<script src="{MODULE_URL}template/resources/js/jquery.qrcode.min.js"></script>
<div class="top_tab"> 
  <a href="{php echo $this->createWebUrl('table',array('op'=>'display'))}" class="layui-btn {if $operation!='display'}layui-btn-primary{/if}">房台管理</a> 
  <span class="help">注:按住拖放可改变排序</span>

</div>
<style>
.panelbox-head i{ color:#009688;}
ul.pcate li{ padding:10px; margin-bottom:1px; cursor:pointer}
ul.pcate li i{ color:#999}
ul.pcate li.isselect { color:#FFF; background:#7266ba}
ul.pcate li.isselect i{ color:#f58a20}
ul.pcate li:hover{color:#FFF; background:#7266ba}
ul.pcate li a{color:#FFF; margin:0 10px;display:none;}
ul.pcate li a i{color:#FFF;}
ul.pcate li.isselect a{display:inline-block;}
ul.pcate li:hover a{ display:inline-block;} 
ul.pcate li.isselect a i,ul.pcate li:hover a i{color:#FFF;}
ul.listtable{-webkit-display:flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
ul.listtable li{border:1px solid #DDD;padding:10px; width:24%; margin:5px 0.5%; position:relative; vertical-align:-5px; background:#FFF; cursor:pointer}

ul.listtable li .t_menu{line-height:18px; text-align:right;}
ul.listtable li .t_menu a{ display:inline-block; margin:5px 10px}
ul.listtable li h2{ font-size:20px; line-height:20px; margin:10px 0; padding:0;text-align:center;}
ul.listtable li .b_menu{ line-height:18px;text-align:left;}

</style>
{if $operation == 'display'}
<div class="row">
  <div class="col-md-3">
    <div class="panelbox">
      <form class="layui-form" onsubmit="return false;" action="">
      <div class="panelbox-head form-inline"> 
      	<A href="#" style="margin-top:5px; display:inline-block">区域管理</A> 
        <div class="input-group pull-right">
          <input type="text" class="form-control" id="pkeyword" name="pkeyword" placeholder="输入新的域名名称">
          <span class="input-group-btn">
            <button class="btn btn-default" lay-submit="" lay-filter="addpcate" type="submit">添加</button>
          </span>
        </div>
      </div>
      </form>
      <div class="panelbox-body">
      	<ul class="pcate">
          {loop $category $row}
          <li cid="{$row['id']}" onclick="chagngepcate(this)"><i class="fa fa-bookmark"></i> <b>{$row['title']}</b> <span class="pull-right">
          <a href="javascript:" onclick="editPcate({$row['id']})"><i class="fa fa-edit"></i></a>
          <a href="javascript:" onclick="deleteContent('{php echo $this->createWebUrl('table',array('op'=>'deletepcate','id'=>$row['id']))}')"><i class="fa fa-trash"></i></a></span></li>
          {/loop}
        </ul>
        
      </div>
    </div>
  </div>
  <div class="col-md-9">
    <div class="panelbox">
      <div class="panelbox-head"> <A href="#">房台列表</A> <A href="javascript:" onclick="addTable(0)" class="btn btn-success">新增</A> <A href="javascript:" onclick="addnumTable()" class="btn btn-success">批量添加</A> <A href="javascript:" onclick="increateQrcode()" class="btn btn-success">批量生成二维码</A> <A href="{php echo $this->createWebUrl('table',array('op'=>'output'))}"  class="btn btn-success">导出二维码</A></div>
      <div class="panelbox-body">
      	<ul class="listtable">
          {loop $list $row}
        	<li tid="{$row['id']}">
            	<div class="t_menu"><a href="javascript:" onclick="showqrcode({$row['id']})"><i class="fa fa-qrcode"></i></a> <a href="javascript:" onclick="addTable({$row['id']})"><i class="fa fa-edit"></i></a> <a href="javascript:" onclick="deleteContent('{php echo $this->createWebUrl('table',array('op'=>'deletetable','id'=>$row['id']))}')"><i class="fa fa-trash"></i></a> </div>
                <h2>{$row['title']}</h2>
                <div class="b_menu">
                	{if $row[status]==0}
                    <span class="label label-success">空置</span>
                    {elseif $row[status]==1}
                    <span class="label label-info">使用中</span>
                    {elseif $row[status]==2}
                    <span class="label label-warning">脏台</span>
                    {elseif $row[status]==3}
                    <span class="label label-danger">预定</span>
                    {/if}
                </div>
            </li>
          {/loop}
        </ul>
      </div>
    </div>
  </div>
</div>


<div id="editcatebox" style="display:none">
<form id="editcateform" index="" class="layui-form" action="" style="padding:15px">
<input type="hidden" name="id" />
  <div class="layui-form-item">
    <input type="text" name="title" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
  </div>
  <div class="layui-form-item">
    <input type="text" name="maxnum" lay-verify="required" placeholder="容纳人数" autocomplete="off" class="layui-input">
  </div>
  <div class="layui-form-item">
    <input type="text" name="perperson" placeholder="茶位/人" autocomplete="off" class="layui-input">
  </div>

    <div class="layui-form-item">
        <input type="radio" name="status" value="0" title="空置">
        <input type="radio" name="status" value="1" title="使用中">
        <input type="radio" name="status" value="2" title="脏台">
    </div>
  <div class="layui-form-item">
    <select name="pcate" lay-verify="required" lay-ignore class="form-control">
        <option value="0" selected>请选择所在区域</option>
          {loop $category $row}
        <option value="{$row['id']}">{$row['title']}</option>
          {/loop}
      </select>
  </div>
  <div class="row">
    	<div class="col-md-12"><Div class="pull-right"> <button class="layui-btn" lay-submit="" lay-filter="btnsubmit">保存</button></Div></Div>
    </div>
</form>
</div>


<div id="editnumbox" style="display:none">
<form id="editnumform" index="" class="layui-form" action="" style="padding:15px">
<input type="hidden" name="id" />
  <div class="layui-form-item">
    <label class="layui-form-label">房台前缀</label>
    <div class="layui-input-block">
      <input type="text" name="title" autocomplete="off" placeholder="请输入房台前缀" class="layui-input">
    </div>
    <div class="help-block">例如：前缀为a，房台数量3，则生成a1，a2，a3</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">容纳人数</label>
    <div class="layui-input-block">
      <input type="text" name="maxnum" lay-verify="required" autocomplete="off" placeholder="请输入容纳人数" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">房台数量</label>
    <div class="layui-input-block">
      <input type="text" name="num" lay-verify="required" autocomplete="off" placeholder="请输入数量" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">茶位</label>
    <div class="layui-input-block">
      <input type="text" name="perperson" autocomplete="off" placeholder="茶位费，每人" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">所属区域</label>
    <div class="layui-input-block">
      <select name="pcate" lay-verify="required" lay-ignore class="form-control">
        <option value="0" selected>请选择所在区域</option>
          {loop $category $row}
        <option value="{$row['id']}">{$row['title']}</option>
          {/loop}
      </select>
    </div>
  </div>
  <div class="layui-form-item">
  	<div class="help-block" style="color:#F00">名称相同的房台，将不会重复增加</div>
  </div>
  <div class="row">
    	<div class="col-md-12"><Div class="pull-right"> <button class="layui-btn" lay-submit="" lay-filter="btnnumsubmit">保存</button></Div></Div>
    </div>
</form>
</div>


<div id="editpcatebox" style="display:none">
<form id="editpcateform" index="" class="layui-form" action="" style="padding:15px">
<input type="hidden" name="id" />
  <div class="layui-form-item">
    <input type="text" name="title" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
  </div>
    <div class="layui-form-item">
        <input type="text" name="printerip" placeholder="区域网口打印机ip" autocomplete="off" class="layui-input">
    </div>
  <div class="row">
      <div class="col-md-12"><Div class="pull-right"> <button class="layui-btn" lay-submit="" lay-filter="btnsubmitpcate">保存</button></Div></Div>
  </div>
</form>
</div>

<div id="qrcodetablebox" style="display:none">
    <form id="qrcodetableboxform" index="" class="layui-form" action="" style="padding:15px">
        <div class="layui-form-item">
            <div class="progress">
                <div class="progress-bar progress-bar-striped active" style="width:0%">
                    <span class="sr-only">45% Complete</span>
                </div>

            </div>
            <div style="text-align: center; padding: 10px;"><span id="shownum">0</span> / <span  id="showallnum">0</span></div>
        </div>
        <div class="row">
            <div class="col-md-12"><Div class="pull-right"> <button class="layui-btn startbtn" type="button" onclick="increateqrcodevent();">开始</button></Div></Div>
        </div>
    </form>
</div>

<script language="javascript">
$(document).ready(function(e) {
    $(".pcate li:eq(0)").addClass("isselect");
	$(".listtable").sortable({delay:300,update:function(){
		updateMove();
	}});
	$(".pcate").sortable({delay:300,update:function(){
		moveup();
	}});
});
layui.use(['layer', 'laypage', 'element','form'], function(){
	var layer = layui.layer
	,laypage = layui.laypage
	,element = layui.element
	,form = layui.form;
	
	form.on('submit(addpcate)', function(data){
		if(data.field.pkeyword.length<1){
			layer.msg("请输入新增区域",{icon:2,time:2000});
			return false;
		}
		var index2=layer.load(1, {shade: [0.1,'#fff']});
		$.post("{php echo $this->createWebUrl('table',array('op'=>'addpcate'))}",data.field,function(returnstr){
			layer.close(index2);
			console.log(returnstr);
			var result=eval("("+returnstr+")");
			if(!result.success){
				layer.msg(result.msg,{icon:2,time:1000});
				return false;
			}
			layer.msg("添加成功",{icon:1,time:2000},function(){
				location.reload();
			});
			
		});
		return false;
	});
	form.on('submit(btnsubmitpcate)', function(data){
		var index2=layer.load(1, {shade: [0.1,'#fff']});
		$.post("{php echo $this->createWebUrl('table',array('op'=>'editpcate'))}",data.field,function(returnstr){
			layer.close(index2);
			layer.close(layer.close($("#editpcateform").attr("index")));
			console.log(returnstr);
			var result=eval("("+returnstr+")");
			if(!result.success){
				layer.msg(result.msg,{icon:2,time:1000});
				return false;
			}
			layer.msg("修改成功",{icon:1,time:1000});
			$(".pcate li[cid='"+data.field.id+"'] b").text(data.field.title);
		});
		return false;
	});
	form.on('submit(btnsubmit)', function(data){
		if(!parseInt(data.field.pcate)){
			layer.msg("请选择所属区域",{icon:2,time:2000});
			return false;
		}
		var index2=layer.load(1, {shade: [0.1,'#fff']});
		$.post("{php echo $this->createWebUrl('table',array('op'=>'posttable'))}",data.field,function(returnstr){
			layer.close(index2);
			var result=eval("("+returnstr+")");
			if(!result.success){
				layer.msg(result.msg,{icon:2,time:2000});
				return false;
			}
			layer.close($("#editcateform").attr("index"));
			var items=result.item;
			$(".pcate li[cid='"+items.pcate+"']").removeClass("isselect").click();
			
		});
		return false;
	});
	
	form.on('submit(btnnumsubmit)', function(data){
		if(!parseInt(data.field.pcate)){
			layer.msg("请选择所属区域",{icon:2,time:2000});
			return false;
		}
		var index2=layer.load(1, {shade: [0.1,'#fff']});
		$.post("{php echo $this->createWebUrl('table',array('op'=>'addnumtable'))}",data.field,function(returnstr){
			layer.close(index2);
			var result=eval("("+returnstr+")");
			if(!result.success){
				layer.msg(result.msg,{icon:2,time:1000});
				return false;
			}
			layer.msg("添加成功"+result.num+"个",{icon:1,time:1000},function(){
				location.reload();
			});
		});
		return false;
	});
	
});
function showqrcode(id){
    var index2=layer.load(1, {shade: [0.1,'#fff']});
    $.post("{php echo $this->createWebUrl('table',array('op'=>'gettable'))}",{"id":id},function(returnstr) {
        layer.close(index2);
        var result = eval("(" + returnstr + ")");
        if (result.success) {
            var items=result.item;
            if(!items['qrlink']){
                layer.msg("请先生成二维码", {icon: 2, time: 2000});
                return;
            }
            var link=items['qrlink'];
            var links=decodeURI(link);
            layer.open({
                title: items['title']
                ,content: '<div style="text-align: center;padding: 10px;"><div id="myqrcode"></div></div>'
                ,success:function(layor,index){
                    $("#myqrcode").qrcode({
                        render: "table",
                        width: 200,
                        height:200,
                        text: links
                    });
                }
            });
        }else{
            layer.msg(result.msg, {icon: 2, time: 2000});
            return;
        }
    });

}
function chagngepcate(obj){
	if($(obj).hasClass("isselect"))return;
	$(obj).addClass("isselect").siblings().removeClass("isselect");
	var pcate=$(obj).attr("cid");
	var index2=layer.load(1, {shade: [0.1,'#fff']});
	$(".listtable").empty();
	$.post("{php echo $this->createWebUrl('table',array('op'=>'getpcatetable'))}",{"pcate":pcate},function(returnstr){
		layer.close(index2);
		var result=eval("("+returnstr+")");
		if(!result.success){
			layer.msg(result.msg,{icon:2,time:2000});
			return;
		}
		var list=result.list;
		var temp="";
		for(var i in list){
			temp+='<li tid="'+list[i].id+'"><div class="t_menu"><a href="javascript:" onclick="showqrcode('+list[i].id+')"><i class="fa fa-qrcode"></i></a><a href="javascript:" onClick="addTable('+list[i].id+')"><i class="fa fa-edit"></i></a> <a href="javascript:" onClick="deleteContent(\'{php echo $this->createWebUrl("table",array("op"=>"deletetable"))}&id='+list[i].id+'\')"><i class="fa fa-trash"></i></a> </div><h2>'+list[i].title+'</h2><div class="b_menu">';
			switch(parseInt(list[i].status)){
				case 0:
					temp+='<span class="label label-success">空置</span>';
				break;
				case 1:
					temp+='<span class="label label-info">使用中</span>';
				break;
				case 2:
					temp+='<span class="label label-warning">脏台</span>';
				break;
				case 3:
					temp+='<span class="label label-danger">预定</span>';
				break;
			}
			temp+='</div></li>';
		}
		$(".listtable").html(temp);
	});
}

function deleteContent(url){
	layer.confirm('确认删除此内容？删除后将不可恢复', {}, function(){
		location.href=url;
	});
}

function addTable(id){
	var til= id==0 ? "添加":"修改";
	$("#editcateform")[0].reset();
	layer.open({
		type: 1,
		title:til,
		area:'400px',
		content: $("#editcatebox").show(),
		success:function(layor,index){
			$("#editcateform").attr("index",index);
			if(id){
				var index2=layer.load(1, {shade: [0.1,'#fff']});
				$.post("{php echo $this->createWebUrl('table',array('op'=>'gettable'))}",{"id":id},function(data){
					layer.close(index2);
					if(!data.success){
						layer.msg(data.msg,{icon:2,time:2000});
						return;
					}
					$("#editcateform").find("input[name='id']").val(id);
					if(id>0){
						var items=data.item;
						$("#editcateform").find("input[name='title']").val(items.title);
						$("#editcateform").find("input[name='maxnum']").val(items.maxnum);
						$("#editcateform select[name='pcate']").val(items.pcate);
						$("#editcateform").find("input[name='perperson']").val(items.perperson);
                        $("#editcateform input[name='status'][value='"+items.status+"']").attr("checked",true);
					}
				},'json');
			}else{
				var pcate=$(".pcate .isselect").attr("cid");
				$("#editcateform select[name='pcate']").val(pcate);
                $("#editcateform input[name='status'][value='0']").attr("checked",true);
			}
            layui.use(['form'], function() {
                var form = layui.form;
                form.render("radio");
            });
		},
		end:function(){
			$("#editcatebox").hide();
		}
	});
}
function addnumTable(){
	$("#editnumform")[0].reset();
	layer.open({
		type: 1,
		title:"批量添加",
		area:'400px',
		content: $("#editnumbox").show(),
		success:function(layor,index){
			$("#editnumform").attr("index",index);
			
		},
		end:function(){
			$("#editnumbox").hide();
		}
	});
}
function increateQrcode(){
    layer.open({
        type: 1,
        title:"批量转换",
        area:'400px',
        content: $("#qrcodetablebox").show(),
        success:function(layor,index){
            $("#qrcodetablebox .progress-bar").width("0");
            $("#qrcodetablebox #showallnum").text("0");
            $("#qrcodetablebox #shownum").text("0");
            $.post("{php echo $this->createWebUrl('table',array('op'=>'getqrcode'))}",{},function(data){
                if(data.success){
                    $("#qrcodetablebox #showallnum").text(data.num);
                }else{
                    layer.msg(data.msg,{icon:2,time:2000});
                    return;
                }
            },'json');
        },
        end:function(){
            $("#qrcodetablebox").hide();
        }
    });
}
function increateqrcodevent(){

    $.post("{php echo $this->createWebUrl('table',array('op'=>'createqrcode'))}",{},function(data){
        console.log(data)
        if(data.success){
            if(data.ismore==true){
                var allnum=parseInt($("#qrcodetablebox #showallnum").text());
                var num=parseInt($("#qrcodetablebox #shownum").text())+1;
                $("#qrcodetablebox #shownum").text(num);
                var pp=parseInt(num/allnum*100);
                $("#qrcodetablebox .progress-bar").width(pp+"%");
                if(allnum<num){
                    layer.msg("完成",{icon:1,time:2000},function(){layer.closeAll();});
                    return;
                }
                setTimeout(increateqrcodevent(),300);
            }else{
                layer.msg("完成",{icon:1,time:2000},function(){layer.closeAll();});
            }
        }else{
            layer.msg(data.msg,{icon:2,time:2000});
            return;
        }
    },'json');
}
function editPcate(id){
	var til="修改区域";
	$("#editpcateform")[0].reset();
	layer.open({
		type: 1,
		title:til,
		area:'400px',
		content: $("#editpcatebox").show(),
		success:function(layor,index){
			$("#editpcateform").attr("index",index);
			var index2=layer.load(1, {shade: [0.1,'#fff']});
			$.post("{php echo $this->createWebUrl('table',array('op'=>'getpcate'))}",{"id":id},function(data){
				layer.close(index2);
				if(!data.success){
					layer.msg(data.msg,{icon:2,time:2000});
					return;
				}
				$("#editpcateform").find("input[name='id']").val(id);
				var items=data.item;
				$("#editpcateform").find("input[name='title']").val(items.title);
                $("#editpcateform").find("input[name='printerip']").val(items.printerip);

			},'json');
		},
		end:function(){
			$("#editpcatebox").hide();
		}
	});
}
function moveup(){
	var index2=layer.load(1, {shade: [0.1,'#fff']});
	var ary=[];
	$(".pcate li").each(function(index, element) {
        ary.push($(this).attr("cid"));
    });
	$.post("{php echo $this->createWebUrl('table',array('op'=>'resetpcateorder'))}",{"displayorder":ary.join(",")},function(data){
		layer.close(index2);
		if(!data.success){
			layer.msg(data.msg,{icon:2,time:2000});
			return;
		}
		
	},'json');
}
function updateMove(){
	var index2=layer.load(1, {shade: [0.1,'#fff']});
	var ary=[];
	$(".listtable li").each(function(index, element) {
        ary.push($(this).attr("tid"));
    });
	$.post("{php echo $this->createWebUrl('table',array('op'=>'resettableorder'))}",{"displayorder":ary.join(",")},function(data){
		layer.close(index2);
		if(!data.success){
			layer.msg(data.msg,{icon:2,time:2000});
			return;
		}
		
	},'json');
}
</script>
{/if}